import React, {useState, useEffect,} from 'react'
import {connect} from 'react-redux'

// components
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import FormInput from "../../../../shared-components/FormInput/FormInput"
import FormPwdInput from "../../../../shared-components/FormPwdInput/FormPwdInput"
import FormCodeInput from "../../../../shared-components/FormCodeInput/FormCodeInput"
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton"

// utils
import {mustInputBeforeSubmit} from "../../../../utils/commonfunc"
import {Toast, WingBlank} from "antd-mobile";
import './Password.css'
import {getYZMReq} from "../../../../apis/goApis";
import LocalStorageService from "../../../../utils/LocalStorageService";

const Password = (props) => {
    const userDetail = props.user.userdetail
    const mobile = userDetail.Mobile
    useEffect(() => {
        if (userDetail.initFlag === 0) {
            const uid = LocalStorageService.get('userid')
            props.fetchUserDetail({uid,})
        }

    }, [])

    // useStates
    // const [contact, setContact] = useState(mobile)
    const [code, setCode,] = useState('')
    const [oldPwd, setOldPwd,] = useState('')
    const [newPwd, setNewPwd,] = useState('')
    const [APwd, setAPwd,] = useState('')
    const [codeBtnActive, setCodeBtnActive] = useState(true)
    const [codeSend, setCodeSend] = useState(false)

    // props
    const {history,} = props
    // dispatch
    const {emitError, doResetPassword,} = props

    // functions
    const checkBeforeSubmit = (vals) => {
        // 表单验证函数
        // val => 字段
        const mapper = {
            contact: '联系方式',
            code: '验证码',
            oldPwd: '原始密码',
            newPwd: '新密码',
            APwd: '确认新密码',
        }

        // 必须填写验证
        if (mustInputBeforeSubmit(mapper, vals, emitError)) {

            // 其他逻辑
            if (vals.newPwd !== vals.APwd) {
                emitError('新密码确认不正确')
                return false
            }
            if (vals.newPwd === vals.oldPwd) {
                emitError('新旧密码必须不一致')
                return false
            }
            return true
        }

        return false
    }

    const onChange = (e, type) => {
        const v = e.target.value
        const o = {
            contact: () => {},
            oldPwd: setOldPwd,
            newPwd: setNewPwd,
            APwd: setAPwd,
            code: setCode,
        }

        if (type === 'contact') {
            if (v) {
                setCodeBtnActive(true)
            } else {
                setCodeBtnActive(false)
            }
        }

        o[type](v)
    }

    const resetPassword = (e) => {
        e.preventDefault()
        // values
        const uid = localStorage.getItem('userid')
        // validator
        if (checkBeforeSubmit({uid, mobile, code, newPwd, oldPwd, APwd,})) {
            doResetPassword({uid, new: newPwd, old: oldPwd, yzcode: code,})
            emptyForm()
        }
    }

    const onCodeBtnClick = () => {

        getYZMReq({mobile, style: 3,})
            .then((res) => {
                if (res.data.ok) {
                    Toast.info('验证码已发送')
                    setCodeSend(true)
                    setCodeBtnActive(false)
                }
            })

    }

    const emptyForm = () => {
        // setContact('')
        setCode('')
        setOldPwd('')
        setNewPwd('')
        setAPwd('')
        setCodeBtnActive(false)
    }

    const form = (
        <WingBlank>
            <FormInput
                text='text'
                value={mobile}
                onChange={e => onChange(e, 'contact')}
                placeholder='手机号码/邮箱地址'
            />
            <FormCodeInput
                codeBtnActive={codeBtnActive}
                setCodeBtnActive={setCodeBtnActive}
                text='text'
                value={code}
                onChange={e => onChange(e, 'code')}
                placeholder='请输入验证码'
                onCodeBtnClick={onCodeBtnClick}
                codeSend={codeSend}

            />
            <FormPwdInput
                value={oldPwd}
                onChange={e => onChange(e, 'oldPwd')}
                placeholder='请输入原始密码'
            />
            <FormPwdInput
                value={newPwd}
                onChange={e => onChange(e, 'newPwd')}
                placeholder='设置新密码'
            />
            <FormPwdInput
                value={APwd}
                onChange={e => onChange(e, 'APwd')}
                placeholder='确认新密码'
            />
        </WingBlank>
    )


    return (
        <>
            <div className='change-pwd-ctn'>
                <GoBackLayout
                    title = '修改密码'
                    history={history}
                >
                    {form}
                </GoBackLayout>
            </div>

            <div className='change-pwd-btn'>
                <WingBlank>
                    <CustomButton
                        inline='true'
                        onClick={(e) => {resetPassword(e)}}
                        shadow='0px 6px 10px 0px rgba(33,58,75,0.4)'
                    >
                        保存
                    </CustomButton>
                </WingBlank>

            </div>
        </>
    )
}
const mapStateToProps = (state) => ({user: state.user,})
const mapDispatchToProps = ({user: {doResetPassword, fetchUserDetail,}, global: {globalError,},}) => ({
    fetchUserDetail: (payload) => fetchUserDetail(payload),
    doResetPassword: (payload) => doResetPassword(payload),
    emitError: (err) => globalError(err),
})


export default connect(mapStateToProps, mapDispatchToProps)(Password)
